<template>
	<nav-header :title="'厂房场地(' + data.pageTotal + ')'">
		<view class="px-4 bg-white grid grid-cols-2" style="height: 44px;z-index: 20;">
			<view v-for="(config,key) in topFnc" :key="key" class="flex items-center justify-center z-20" @click="topFnc[key].fnc()">
				<view class="flex items-center justify-center text-gray-66">
					<text class="pr-1" v-text="config.title"></text>
					<u-icon :name="config.isClick? 'arrow-up-fill':'arrow-down-fill'" color="#bfbfbf" size="10"></u-icon>
				</view>
			</view>
		</view>
		<my-page ref="mypage" v-model="dataList" :height="system.screenHeight - system.statusBarHeight - 88" :contentClass="['pt-4']" @load-data="loadData">
			<template slot="content">
				<view class="pt-4">
					<view v-for="(item,index) in dataList" :key="index" class="bg-white flex mx-4 mb-4 py-4 px-2 rounded-lg"
						@click="$util.myNavigateTo('/pages_employ/place_detail?id=' + item.id)">
						<view class="relative" style="width: 120px;">
							<!-- <view class="bg-green absolute top-0 left-0 px-2 py-1 text-sm text-white z-10 radius-8">有房源</view> -->
							<u-image :src="$util.formatImageIdUrl(item.cover)" width="100%" height="100px" radius="8"
								:mode="item.cover? 'aspectFill':'heightFix'"></u-image>
						</view>
						<view class="pl-3 flex flex-col justify-between" style="width: calc(100% - 120px);">
							<view class="text-black-33 font-bold zx-multi-ellipsis--2" v-text="item.name"></view>
							<view class="leading-6">
								<view v-if="item.tagList" class="flex text-gray-99 zx-ellipsis">
									<view v-for="(tag,index) in item.tagList.split(';')" :key="index" class="flex">
										<text v-text="tag"></text>
										<text v-if="index != (item.tagList.split(';').length - 1)" class="px-1">·</text>
									</view>
								</view>
								<view class="flex text-sm text-gray-99">
									<view class="flex items-center mr-4">
										<i class="iconfont icon-zong text-gray-99 mr-0_5"></i>
										<text class="pt-0_5" v-text="turnArea(item.totalArea) "></text>
										<text>㎡</text>
									</view>
									<view class="flex items-center">
										<i class="iconfont icon-shi text-gray-99 mr-0_5"></i>
										<text class="pt-0_5" v-text="turnArea(item.floorArea)"></text>
										<text>㎡</text>
									</view>
								</view>
                <view class="flex items-center text-gray-99 text-sm">
                  <text class="zx-ellipsis" v-text="item.introduce"></text>
                </view>
								<view class="flex items-center text-gray-99 text-sm">
									<i class="iconfont icon-dingwei2 text-gray-99 pr-1"></i>
									<text class="zx-ellipsis" v-text="item.address"></text>
								</view>
								<!-- <view class="flex text-red-500">
									<text class="text-xs pr-1 pt-0_5">¥</text>
									<u-count-to :endVal="parseInt(item.price)" separator="," color="#EF4444" fontSize="18"></u-count-to>
									<text>/月</text>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</template>
		</my-page>
		<u-popup :show="show" mode="top" overlayOpacity="0" zIndex="10" round="8" @close="show = false"
			:safeAreaInsetBottom="false" :customStyle="{'margin-top': '132px', 'border-top': '1px solid #f0f0f0'}">
			<view class="flex justify-between items-center mx-4 py-3 border-b-ee text-color-theme text-sm z-10">
				<text>选现一</text>
				<u-icon name="checkbox-mark" color="#2d58cb" size="18"></u-icon>
			</view>
			<view class="flex justify-between items-center mx-4 py-3 text-sm text-black-33 z-10">
				<text>选项二</text>
			</view>
		</u-popup>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import NavHeader from '@/components/nav_header.vue'
	import MyPage from '@/components/my_page.vue'
	import * as placeApi from '@/interface/junchuang/place.js'
	import MescrollPageMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-page.js"
	export default {
		mixins: [MescrollPageMixin],
		components: {
			NavHeader,MyPage
		},
		data() {
			const v = this
			return {
				show: false,
				searchObj: {
					type: null,
					name: null,
				},
				topFnc: {
					quyu: {title: '区域',  val: '', text: '',isClick: false, dataList: [], fnc: function () {}},
					yongtu: {title: '用途',  val: '', text: '',isClick: false, dataList: [], fnc: function () {}},
				},
				dataList: [],
				data: {pageTotal: 0},
			}
		},
		computed: {
			...mapState({
				system: state => state.system
			})
		},
    onShow() {
      this.$util.openShare();
    },
		onPullDownRefresh () {
			this.$refs['mypage'].dataReload()
			uni.stopPullDownRefresh()
		},
		methods: {
			loadData(page, success, error){
				const v = this;
				Object.assign(v.data, page)
				placeApi.getPlacePageList(v.data).then(res=>{
					v.data.pageTotal = res.data.total || 0
					res.data.rows.forEach(item=>{
						if (!item.tagList) item.tagList = ''
					})
					success(res)
				}).catch(error)
			},
			turnArea (val) {
				if (!val) return 0
				let lastVals = (val + '').split(".")
				if (parseInt(lastVals[1]) > 0) {
					return val
				}else {
					return parseInt(val)
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}

	.bg-green {
		background-color: rgba(45,97,48,0.5)
	}

	.blueGradient {
		background: #4483d1;
		background: -webkit-linear-gradient(to right,#4483d1,#3c7cd3);
		background: linear-gradient(to right,#4483d1,#3c7cd3);
	}

	.radius-8 {
		border-top-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
</style>
